import { useState } from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  CoffeeOutlined,
  GiftOutlined,
  BarChartOutlined,
  NotificationOutlined,
  TagsOutlined,
} from '@ant-design/icons';

const { Sider, Content } = Layout;

const menuItems = [
    {
    key: '/',
    icon: <BarChartOutlined />,
    label: <Link to="/">销售数据</Link>,
  },
  {
    key: '/members',
    icon: <UserOutlined />,
    label: <Link to="/members">会员管理</Link>,
  },
  {
    key: '/orders',
    icon: <ShoppingCartOutlined />,
    label: <Link to="/orders">订单管理</Link>,
  },
  {
    key: '/dishes',
    icon: <CoffeeOutlined />,
    label: <Link to="/dishes">菜品管理</Link>,
  },
  {
    key: '/activities',
    icon: <GiftOutlined />,
    label: <Link to="/activities">活动管理</Link>,
  },
  {
    key: '/promotions',
    icon: <NotificationOutlined />,
    label: <Link to="/promotions">推广管理</Link>,
  },
  {
    key: '/coupons',
    icon: <TagsOutlined />,
    label: <Link to="/coupons">优惠券管理</Link>,
  },
];

export default function BasicLayout() {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();

  return (
    <Layout className="h-screen">
      <Sider 
        collapsible 
        collapsed={collapsed} 
        onCollapse={setCollapsed}
        className="fixed left-0 top-0 bottom-0 z-10"
      >
        <div className="h-16 m-4 rounded flex items-center justify-center font-bold"
          style={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: '#fff',
            fontSize: collapsed ? '14px' : '16px',
            textShadow: '0 2px 4px rgba(0,0,0,0.1)',
            letterSpacing: '0.5px'
          }}
        >
          {collapsed ? '精酿' : '精酿啤酒管理后台'}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
        />
      </Sider>
      <Layout style={{ marginLeft: collapsed ? 80 : 40, transition: 'margin 0.2s' }}>
        <Content style={{ overflow: 'auto', backgroundColor: '#f5f5f5' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}
